<template>
	<div class="cc-pagination cc-flex flex-v" :style="{ height: store.appStore?.layout.mainBodyHeight }">
		<div class="header flex-0 cc-flex flex-h-between" ref="tableHeaderDom">
			<div>
				<el-form-item>
					<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
					<!-- <el-button type="primary" @click="deleteBatchHandle()">删除所选</el-button> -->
				</el-form-item>
			</div>
			<div></div>
		</div>
		<div class="table-body flex-v-100">
			<el-table v-loading="state.dataListLoading" :data="state.dataList" :style="{ width: '100%', height: tabelHeight }" :height="tabelHeight">
				<el-table-column prop="question" label="问题"></el-table-column>
				<el-table-column prop="answer" label="方案"></el-table-column>
				<el-table-column label="操作" fixed="right" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
						<el-button type="text" size="small" @click="deleteBatchHandle(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer flex-0" ref="tableFooterDom">
			<el-pagination
				:current-page="state.current"
				:page-sizes="state.pageSizes"
				:page-size="state.size"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
		<!-- 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import store from '@/store'
import AddOrUpdate from './question-edit.vue'
import { MPaginationOption, PaginationHook } from '@/modules/common'
import { MQuestion, ConfigService } from '@/modules/system'

onMounted(() => {})

const state: MPaginationOption = reactive({
	dataListMethod: ConfigService.getQuestiones,
	deleteUrl: '/yxd/oa/faq/delete',
	queryForm: {}
})
const addOrUpdateRef = ref()
function addOrUpdateHandle(question?: MQuestion) {
	addOrUpdateRef.value.init(question)
}

const {
	getDataList,
	sizeChangeHandle,
	selectionChangeHandle,
	sortChangeHandle,
	currentChangeHandle,
	deleteBatchHandle,
	tabelHeight,
	tableHeaderDom,
	tableFooterDom
} = PaginationHook(state)
</script>

<style scoped lang="scss">
.cc-pagination {
	.header {
		background-color: #eee;
		padding: 8px 0px 0px 8px;
		margin: 0px 0px -8px 0px;
	}
	.footer {
		background-color: #f1f1f1;
		padding: 4px;
	}
}
</style>